<template>
  <div>
    <el-carousel arrow="hover" height="500px" class="show" :interval="3000">
      <el-carousel-item v-for="(item, index) in SlideShowList" :key="index" :label="index + 1">
        <el-image :src="(urls == 'banner_url' ? item.banner_url : item)" fit="contain" class="imgs" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: 'KodaiSlideShow',
  props: {
    SlideShowList: {
      type: Array,
      default () {
        return []
      }
    },
    urls: {
      type: String,
      default () {
        return 'banner_url'
      }
    }
  },
  data () {
    return {
      List: [],
      currentIndex: 0
    };
  },

  mounted () {

  },

  methods: {

  },
};
</script>
<style lang="css">
.el-carousel__indicator--horizontal .el-carousel__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 28px;
  border: 2px solid #ac8a67;
  color: #d2986c;
  font-size: 15px;
  margin-right: 15px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0);
}

.el-carousel__indicator--horizontal.is-active .el-carousel__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 28px;
  border-radius: 50%;
  opacity: 1;
  background: #3C2314;
  border: 1px solid #3C2314;
  color: #FBF5DD;
  text-align: center;
}

:v-deep .el-image__error,
.el-image__inner,
.el-image__placeholder {
  width: 80%;
}

.el-carousel__indicators--labels {
  right: 55% !important;
  bottom: 10px;
}

.img {
  background-position: 80% 100%;
}</style>

